<template>
  <div class="bottom-home">
    <div style="padding: 5px 10px">
      <el-button type="success" @click="handleAdd" :disabled="multiple"
        >确认</el-button
      >
    </div>
     <!-- max-height="230" -->
    <el-table
      :data="tableData"
      style="width: 100%; padding: 0px 10px"
      class="table-item"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column
        prop="projectName"
        show-overflow-tooltip
        label="项目名称"
        align="center"
      />
      <el-table-column
        prop="createPerson"
        label="项目负责人"
        width="105"
        align="center"
      />
      <el-table-column
        prop="taskStatus"
        label="项目状态"
        width="89"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.taskStatus === "1" ? "已完成" : "执行中" }}
        </template>
      </el-table-column>

      <el-table-column
        prop="businessName"
        label="业务类型"
        width="105"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="num1"
        label="任务数量（执行中）"
        align="center"
        width="150"
      />
      <el-table-column
        prop="num2"
        label="任务数量（已完成）"
        align="center"
        width="150"
      />
    </el-table>
    <div class="footer">
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          small
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, prev, pager, next, sizes"
          :total="total"
        ></el-pagination>
      </el-row>
    </div>
    <el-dialog
      v-model="dialogVisibleAdd"
      title="项目完成效率"
      width="35%"
      destroy-on-close
      center
    >
      <ComRightCenter
        :multipleSelection="multipleSelection"
        ref="comRightCenter"
        style="flex: 1"
      ></ComRightCenter>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed, onMounted, ref, defineExpose } from "vue";
//@ts-ignore
import { completion } from "@/api/dataScreen/index.js";
//@ts-ignore
import ComRightCenter from "@/views/dataScreen/component/ComRightCenter.vue";

const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const completionList = async (value) => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  if (value) {
    params["projectName"] = value;
  }
  const response = await completion(params);

  if (response.code === 200) {
    tableData.value = response.rows;
    total.value = response.total;
  } else {
    ElMessage.error(response.msg);
  }
};

const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  completionList("");
};

const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  completionList("");
};

// 非多个禁用
const multiple = ref(true);
const multipleSelection = ref([]);

const handleSelectionChange = (val: any, selection: any) => {
  multipleSelection.value = val;

  multiple.value = !multipleSelection.value.length;   
 
};

const dialogVisibleAdd = ref(false);

const emit = defineEmits(["handleAdd"]);

// 如果
const handleAdd = () => {
  if (multipleSelection.value.length && multipleSelection.value.length !== 1) {
    ElMessage.error("请您选择其中一条项目");
  } else {
    dialogVisibleAdd.value = true;
    // emit("handleAdd", dialogVisibleAdd.value);
  }
};

onMounted(async () => {
  await completionList("");
});

// 主动暴露方法/值
defineExpose({ completionList });
</script>
<style scoped lang="scss">
.table-item{
  height:calc(42.5vh - 120px)
}
.bottom-home {
  position: relative;
}
.footer {
  position: absolute;
  bottom: 1px;
  right: 10px;
}
</style>
